<template>
  <div class="app-container">
    <el-tabs v-model="activeName" class="pad_30">
      <el-tab-pane label="会员卡组合" name="first">
        <div class="divBar" />
        <h5 class="titleInfo">会员卡组合</h5>
        <el-form ref="form" class="form" :model="form" label-width="150px" :rules="rule">
          <el-row>
            <el-col :span="4">
              <el-form-item label="商家券库" prop="name">
                <!--  @blur="handleName()" -->
                <!-- <el-input class="width_30" v-model="" /> -->
                <span class="width_30">{{ form.name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button type="primary" @click="handleOpen">打开券库</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="PLUS会员卡模板" :required="true">
                <el-select
                  v-model="form.province_name"
                  placeholder="请选择"
                  @change="handleProvince"
                >
                  <el-option
                    v-for="(item,index) in regionList"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
                <!-- <el-input
                                    v-model="form.province_name"
                                    size="small"
                                    disabled
                                    class="min_width"
                                />-->
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <el-button type="primary" @click="handleTem">打开模板券库</el-button>
              </el-form-item>
              <!-- <el-form-item prop="cardTemplate">
                <el-select
                  v-model="form.cardTemplate"
                  placeholder="请选择"
                  clearable
                  @change="handleChange"
                >
                  <el-option
                    v-for="(item,index) in packageStatus"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
                            </el-form-item>-->
            </el-col>
          </el-row>
        </el-form>
        <!-- 商家卡券列表 -->
        <div class="df">
          <span class="col_666" />
          <h5 class="font_16">商家卡券</h5>
        </div>
        <!--  v-loading="tableLoading" -->
        <div class="listDiv">
          <el-table :data="shopData" style="width: 100">
            <el-table-column prop="ticket_type" label="优惠券类型" align="center" />
            <el-table-column prop="shop_name" label="店家名称" align="center" />
            <el-table-column prop="name" label="优惠券名称" align="center" />
            <el-table-column prop="service_name" label="对应服务名称" align="center" />
            <el-table-column prop="num" label="数量" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.num=1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="有效期" align="center">
              <!--   v-if="scope.row.start_time&&scope.row.end_time" -->
              <template slot-scope="scope">
                <span
                  v-if="scope.row.start_time&&scope.row.end_time"
                >{{ scope.row.start_time+' 至 '+scope.row.end_time }}</span>
                <span v-else />
              </template>
              <!-- <span v-else></span> -->
            </el-table-column>
          </el-table>
        </div>
        <!-- 平台卡券 -->
        <div class="df mt_20">
          <span class="col_666" />
          <h5 class="font_16">平台卡券</h5>
        </div>
        <div class="listDiv">
          <el-table :data="goodsData" style="width: 100">
            <el-table-column prop="ticket_type" label="优惠券类型" align="center" />
            <el-table-column prop="scope" label="适用范围" align="center" />
            <el-table-column prop="type_name" label="优惠券名称" align="center" />
            <el-table-column prop="available" label="优惠券对应商品" align="center" />
            <el-table-column prop="type_money" label="优惠券金额" align="center" />
            <!-- <el-table-column prop="tiket_count" label="数量" />> -->
            <el-table-column prop="num1" label="数量" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.num1=1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="有效期" align="center">
              <template slot-scope="scope">
                <span
                  v-if="scope.row.start_ticket_time&&scope.row.end_ticket_time"
                >{{ scope.row.start_ticket_time+' 至 '+scope.row.end_ticket_time }}</span>
                <span v-else />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 医美卡券 -->
        <div class="df mt_20">
          <span class="col_666" />
          <h5 class="font_16">医美卡券</h5>
        </div>
        <div class="listDiv">
          <el-table :data="beautyData" style="width: 100">
            <el-table-column prop="ticket_type" label="优惠券类型" align="center" />
            <el-table-column prop="hospital_name" label="使用范围" align="center" />
            <el-table-column prop="type_name" label="优惠券名称" align="center" />
            <el-table-column prop="project_name" label="优惠券对应项目" align="center" />
            <!-- <el-table-column prop="tiket_count" label="数量" /> -->
            <el-table-column prop="num2" label="数量" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.num2=1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="有效期" align="center">
              <template slot-scope="scope">
                <span
                  v-if="scope.row.start_ticket_time&&scope.row.end_ticket_time"
                >{{ scope.row.start_ticket_time+' 至 '+scope.row.end_ticket_time }}</span>
                <span v-else />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-button type="primary" class="mt_20" @click="handleNext('form')">下一步</el-button>
      </el-tab-pane>
      <el-tab-pane label="基础信息" name="second">
        <el-form ref="formInfo" :model="formInfo" label-width="150px" :rules="rules">
          <el-row>
            <el-col :span="24">
              <el-form-item label="PLUS会员卡名称" prop="name">
                <el-input
                  v-model="formInfo.name"
                  maxlength="9"
                  placeholder="最少输入1个字，最多输入9个字"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- required -->
              <el-form-item label="会员卡描述" prop="desc">
                <el-input
                  v-model="formInfo.desc"
                  type="textarea"
                  size="large"
                  :rows="4"
                  maxlength="30"
                  placeholder="最少输入1个字，最多输入30个字"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="会员卡原价" prop="origin_price">
                <el-input v-model="formInfo.origin_price" placeholder="请输入会员原价" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <!-- required -->
              <el-form-item label="会员卡售价" prop="sale_price">
                <el-input v-model="formInfo.sale_price" placeholder="请输入会员售价" />
                <b class="text">PLUS会员卡定价 360 - 400元区间</b>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <!-- required -->
              <el-form-item label="服务费" prop="service_price">
                <el-input v-model="formInfo.service_price" placeholder="请输入会员售价" />
                <b class="text">
                  服务费为平台服务费用，定价 0 - 30元区间
                  <br>平台服务费用越高，推广效果越好
                  <br>商户结算最高100元，其中包含服务费
                  <br>举例：服务费0元 ，商户结算100元
                  <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;服务费10元，商户结算90元，以此类推
                </b>
              </el-form-item>
            </el-col>
            <!-- 富文本编辑器 -->
            <el-col :span="14">
              <el-form-item label="购买须知" prop="purchase_note">
                <Tinymce v-model="formInfo.purchase_note" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-button
                  type="primary"
                  class="mt_20"
                  @click="submitAudit('formInfo')"
                >提交审核</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <!-- 券库弹窗 -->
    <el-dialog title="添加券库" :visible.sync="dialogFormVisible" width="50%" @close="clear">
      <el-form ref="form1" :inline="true" :model="form1" label-width="150px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="体验券名称" prop="keyword">
              <el-input v-model="form1.keyword" placeholder="请输入体验券名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="small"
                @click="handleSearch"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-loading="tableLoading" class="listDiv">
        <el-table ref="tableData" :data="tableData" style="width: 100%">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column fixed type="index" label="序号" width="50" align="center" />
          <el-table-column prop="code" label="体验券编码" align="center" />
          <el-table-column prop="name" label="体验券名称" align="center" />
          <el-table-column label="有效期" align="center">
            <template slot-scope="scope">
              <span
                v-if="scope.row.start_time&&scope.row.end_time"
              >{{ scope.row.start_time+'-'+scope.row.end_time }}</span>
              <span v-else />
            </template>
          </el-table-column>
          <el-table-column prop="service_name" label="服务名称" align="center" />
        </el-table>
        <!-- 分页 -->
        <div class="pagesCon">
          <div>
            <el-pagination
              :current-page="form1.page"
              :page-sizes="page_sizes"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page_totals"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <!-- 提交按钮 -->
        <el-button type="primary" class="submitBtn" @click="submitFn()">确认</el-button>
        <el-button type="primary" class="submitBtn" @click="dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 模板券库弹窗 -->
    <el-dialog
      title="添加模板券库"
      class="rrr"
      :visible.sync="dialogTempVisible"
      width="95%"
      @close="clearTem"
    >
      <div class="mb_20">
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
      <div class="listDiv">
        <el-table
          ref="tableData1"
          :data="tableData1"
          style="width: 100%"
          :header-cell-style="{background:'#FACD91',color:'#333'}"
        >
          <el-table-column type="index" label="序号" width="60px" align="center">
            <template slot-scope="scope">
              <el-radio
                v-model="radio"
                :label="scope.row.id"
                @change="getCurrentRow(scope.row.id)"
              >{{ scope.row.$index }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="模板" class="ddd" width="100px" />
          <el-table-column
            prop="goods_tickets_list"
            label="平台卡券"
            width="820px"
            align="center"
          >
            <template slot-scope="scope">
              <div v-loading="tableLoading" class="clea_scoll">
                <el-table
                  ref="tableData2"
                  :data="scope.row.goods_tickets_list"
                  style="width: 100%"
                  :header-cell-style="{background:'#FACD91',color:'#333'}"
                >
                  <el-table-column
                    prop="ticket_type"
                    label="优惠券类型"
                    width="100px"
                    align="center"
                  />
                  <el-table-column prop="scope" label="适用范围" align="center" />
                  <el-table-column
                    prop="type_name"
                    label="优惠券名称"
                    width="120px"
                    align="center"
                  />
                  <el-table-column
                    prop="available"
                    label="优惠券对应商品"
                    width="120px"
                    align="center"
                  />
                  <el-table-column
                    prop="type_money"
                    label="优惠券金额"
                    width="100px"
                    align="center"
                  />
                  <el-table-column prop="num1" label="数量" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.num1=1 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="有效期" width="200px" align="center">
                    <template slot-scope="scope">
                      <span
                        v-if="scope.row.start_ticket_time&&scope.row.end_ticket_time"
                      >{{ scope.row.start_ticket_time+' 至 '+scope.row.end_ticket_time }}</span>
                      <span v-else />
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="beauty_tickets_list"
            label="医美卡券"
            width="800px"
            header-align="center"
          >
            <template slot-scope="scope">
              <div v-loading="tableLoading" class="clea_scoll">
                <el-table
                  ref="tableData3"
                  :data="scope.row.beauty_tickets_list"
                  style="width: 100%"
                  :header-cell-style="{background:'#f4f4f4',color:'#333'}"
                >
                  <el-table-column
                    prop="ticket_type"
                    label="优惠券类型"
                    width="90px"
                    align="center"
                  />
                  <el-table-column
                    prop="hospital_name"
                    label="使用范围"
                    width="110px"
                    align="center"
                  />
                  <el-table-column
                    prop="type_name"
                    label="优惠券名称"
                    width="120px"
                    align="center"
                  />
                  <el-table-column
                    prop="project_name"
                    label="优惠券对应项目"
                    width="180px"
                    align="center"
                  />
                  <el-table-column prop="num2" label="数量" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.num2=1 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="有效期" width="200px" align="center">
                    <template slot-scope="scope">
                      <span
                        v-if="scope.row.start_ticket_time&&scope.row.end_ticket_time"
                      >{{ scope.row.start_ticket_time+' 至 '+scope.row.end_ticket_time }}</span>
                      <span v-else />
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getPro } from '@/api/shopMessage'
import Tinymce from '@/components/Tinymce'
import {
  openTickets,
  ticketDetails,
  cardTemp,
  submitCheck,
  showTables,
  getRegion,
  getProTick,
  getShopList,
  getTicksList
} from '@/api/plusVipList'
export default {
  name: 'PlusVipAdd',
  components: { Tinymce },
  data() {
    // 原价
    const originPrice = (rule, value, callback) => {
      const reg = /^\d{1,}$/
      if (!value) {
        return callback(new Error('请输入会员卡原价'))
      } else if (!reg.test(value)) {
        return callback(new Error('请输入正确的数字'))
      } else if (Number(value) > 360) {
        callback()
      } else {
        return callback(new Error('请输入正确的金额'))
      }
    }
    // 售价
    const priceReg = (rule, value, callback) => {
      const reg = /^\d{1,}$/
      if (!value) {
        return callback(new Error('请输入会员卡售价'))
      } else if (!reg.test(value)) {
        return callback(new Error('请输入正确的数字'))
      } else if (Number(value) < 360 || Number(value) > 400) {
        return callback(new Error('PLUS会员卡定价 360 - 400元区间'))
      } else if (
        this.formInfo.origin_price &&
                Number(value) >= Number(this.formInfo.origin_price)
      ) {
        return callback(new Error('会员卡原价须大于售价'))
      } else {
        callback()
      }
    }
    // 服务费
    const sericeFee = (rule, value, callback) => {
      const reg = /^\d{1,}$/
      if (!value) {
        return callback(new Error('请输入服务费'))
      } else if (!reg.test(value)) {
        return callback(new Error('请输入正确的数字'))
      } else {
        if (value <= 30) {
          callback()
        } else {
          return callback(new Error('定价在0-30元之间'))
        }
      }
    }
    // 名称验证
    var projectName = (rule, value, callback) => {
      const reg1 = new RegExp(
        "[`!@#$^&*|':;',.<>/?~！@#￥……&*——|‘；：']"
      )
      const reg2 = /(^\_)|(\__)|(\_+$)/
      const reg3 = /^\d+\d+\d$/
      if (!value) {
        callback(new Error('请输入名称'))
      } else if (reg1.test(value)) {
        callback(new Error('名称不能有特殊字符'))
      } else if (reg2.test(value)) {
        callback(new Error('名称首尾不能出现下划线'))
      } else if (reg3.test(value)) {
        callback(new Error('名称不能全为数字'))
      } else {
        callback()
      }
    }
    return {
      radio: 0,
      regionList: [], // 省份列表
      listData: [],
      dialogTempVisible: false, // 添加模板券库弹窗
      activeName: 'first',
      form: {
        name: '',
        province_name: '',
        cardTemplate: '',
        province_id: ''
      },
      // packageStatus: [],
      shopData: [], // 商家列表
      goodsData: [], // 平台
      beautyData: [], // 医美
      tableData1: [], // 一级表头
      tableData2: [], // 弹窗平台卡券
      tableData3: [], // 弹窗医美卡券
      // 省
      options: [],
      // 基础信息
      formInfo: {
        name: '',
        desc: '',
        origin_price: '',
        sale_price: '',
        service_price: '',
        service_content: ''
      },
      // 选择券库
      form1: {
        keyword: '',
        page: 1,
        size: 10
      },
      dialogFormVisible: false,
      // 弹窗列表
      tableData: [],
      tableLoading: true,
      shop_ticket_ids: '', // 套餐id数组
      plus_template_id: '', // 体验券id
      // disabled: true,
      page_sizes: [5, 10, 30, 50, 100], // 每页显示个数
      page_totals: 60, // 总条目数
      // 会员卡组合
      rule: {
        name: [
          {
            required: true,
            message: '请选择商家券库',
            trigger: 'blur'
          }
        ],
        cardTemplate: [
          {
            required: true,
            message: '请选择会员卡套餐',
            trigger: 'change'
          }
        ]
      },
      // 提交表单验证规则
      rules: {
        name: [
          {
            required: true,
            validator: projectName,
            trigger: 'blur'
          }
        ],
        desc: [
          {
            required: true,
            message: '您有内容未填写，请填写后再次提交审核',
            trigger: 'blur'
          }
        ],
        origin_price: [
          {
            required: true,
            // message: '请输入正确的金额',
            validator: originPrice,
            trigger: 'blur'
          }
        ],
        sale_price: [
          {
            required: true,
            // message: 'PLUS会员卡定价 360 - 400元区间',
            validator: priceReg,
            trigger: 'blur'
          }
        ],
        service_price: [
          {
            required: true,
            validator: sericeFee,
            // message:
            //                 '服务费为平台服务费用，定价 0 - 30元区间 平台服务费用越高，推广效果越好商户结算最高100元，其中包含服务费举例：服务费0元 ，
            //                 商户结算100元 服务费10元，商户结算90元，以此类推',
            trigger: 'blur'
          }
        ],
        service_content: [
          {
            required: true,
            // validator: sericeFee,
            message: '请填写购买须知',
            trigger: 'blur'
          }
        ],
        purchase_note: [
          {
            required: true,
            message: '请填写购买须知',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  inject: ['reload'],
  watch: {
    'formInfo.purchase_note'(val) {
      //   console.log(val)
      if (val) {
        this.$refs.formInfo.clearValidate('purchase_note')
      } else {
        this.$refs.formInfo.validateField('purchase_note')
      }
    }
  },
  created() {
    // this.cardTemplates();
    this.handleRegion()
  },
  methods: {
    // 1.3.1打开模板券库
    handleTem() {
      this.dialogTempVisible = true
      this.handleOpenTemp()
    },
    handleOpenTemp() {
      const datas = {
        province_id: this.form.province_id
      }
      getProTick(datas)
        .then(res => {
          if (res.data.code == 200) {
            this.tableData1 = res.data.data
            this.listData = res.data.data
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
          this.tableLoading = false
        })
        .catch(err => {
          this.tableLoading = false
          this.errorStatus(err.msg)
        })
    },
    // 省份跟全国
    handleRegion() {
      getRegion()
        .then(res => {
          if (res.data.code == 200) {
            const resData = res.data.data
            const arr = []
            resData.list.forEach(e => {
              arr.push({
                name: e.province_name,
                value: e.province_id
              })
            })
            this.form.province_name = resData.province_name
            this.form.province_id = resData.province_id
            this.regionList = arr
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
        })
        .catch(err => {
          this.errorStatus(err.msg)
        })
    },
    // 省份对应id,change事件
    handleProvince(e) {
      this.form.province_id = e
      this.handleOpenTemp()
    },
    // 获取radio对应id
    getCurrentRow(e) {
      this.radio = e
      this.plus_template_id = this.radio
    },
    handleTickList(e) {
      getTicksList(e)
        .then(res => {
          if (res.data.code == 200) {
            const resData = res.data.data
            this.goodsData = resData.goods_tickets_list
            this.beautyData = resData.beauty_tickets_list
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
        })
        .catch(err => {
          this.errorStatus(err.msg)
        })
    },
    // 模板弹窗确认
    confirm() {
      this.dialogTempVisible = false
      if (this.plus_template_id) {
        const datas = {
          plus_template_id: JSON.stringify(this.plus_template_id)
        }
        this.handleTickList(datas)
      }
    },
    clearTem() {
      this.dialogTempVisible = false
      this.radio = ''
    },
    // *******************
    // 打开券库
    handleOpen() {
      this.dialogFormVisible = true
      this.handleTickets(this.form1)
    },
    // 打开券库列表
    handleTickets(e) {
      openTickets(e)
        .then(res => {
          if (res.data.code == 200) {
            const resData = res.data.data
            this.page_totals = res.data.meta.total
            this.tableData = resData
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
          this.tableLoading = false
        })
        .catch(err => {
          this.errorStatus(err.msg)
          this.tableLoading = false
        })
    },
    // 打开券库查询
    handleSearch() {
      this.form1.page = 1
      this.handleTickets(this.form1)
    },
    // plus会员卡模板
    // cardTemplates() {
    //     cardTemp()
    //         .then(res => {
    //             if (res.data.code == 200) {
    //                 this.form.province_name = res.data.data.province_name;
    //                 const resData = res.data.data.list;
    //                 const newArr = [];
    //                 resData.forEach(e => {
    //                     newArr.push({
    //                         value: e.id,
    //                         name: e.name
    //                     });
    //                 });
    //                 this.packageStatus = newArr;
    //             } else {
    //                 this.$message({
    //                     showClose: true,
    //                     message: res.data.msg,
    //                     type: "warning"
    //                 });
    //             }
    //         })
    //         .catch(err => {
    //             // this.errorStatus(err.msg);
    //         });
    // },
    // 弹窗确定取消按钮
    submitFn() {
      const selectData = this.$refs.tableData.selection
      const id = []
      selectData.forEach(e => {
        id.push(e.id)
      })
      this.dialogFormVisible = false
      this.shop_ticket_ids = id
      // console.log(888, id);
      if (id.length > 0) {
        this.handleDetails({ shop_ticket_ids: JSON.stringify(id) })
        this.$refs.form.clearValidate('name')
      }
    },
    // 商家券库详情
    handleDetails(e) {
      ticketDetails(e)
        .then(res => {
          if (res.data.code == 200) {
            // console.log(res);
            const resData = res.data.data
            const arr = []
            resData.forEach(e => {
              arr.push(e.name)
              this.form.name = arr.join('、')
            })
            // if (this.form.name && this.form.cardTemplate) {
            //     this.handleTables();
            // }
            // 1.3.1 new
            if (this.form.name) {
              this.handleShopTabs()
            }
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
        })
        .catch(err => {
          this.errorStatus(err.msg)
        })
    },
    // 1.3.1商家列表
    handleShopTabs() {
      const datas = {
        shop_ticket_ids: JSON.stringify(this.shop_ticket_ids)
      }
      getShopList(datas)
        .then(res => {
          if (res.data.code == 200) {
            this.shopData = res.data.data
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
        })
        .catch(err => {
          this.errorStatus(err.msg)
        })
    },
    // 下一步
    handleNext(e) {
      this.$refs[e].validate(valid => {
        if (valid) {
          if (this.shop_ticket_ids && this.plus_template_id) {
            this.activeName = 'second'
          } else {
            this.$message({
              message: '请选择模板券库',
              type: 'warning'
            })
          }
        } else {
          this.$message({
            message: '有必填项没填，不能提交咯',
            type: 'warning'
          })
          return false
        }
      })
      // this.activeName = "second";
    },
    // 提交审核
    handleSubmit(e) {
      submitCheck(e)
        .then(res => {
          if (res.data.code == 200) {
            this.succStatus('提交成功')
            this.$router.push('/plusVipList')
            this.reload()
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
        })
        .catch(err => {
          this.errorStatus(err.msg)
        })
    },
    // 提交审核
    submitAudit(e) {
      this.$refs[e].validate(valid => {
        const datas = {
          plus_template_id: this.plus_template_id,
          shop_ticket_ids: JSON.stringify(this.shop_ticket_ids),
          name: this.formInfo.name,
          desc: this.formInfo.desc,
          origin_price: this.formInfo.origin_price,
          sale_price: this.formInfo.sale_price,
          service_price: this.formInfo.service_price,
          purchase_note: this.formInfo.purchase_note
        }
        if (valid) {
          if (this.shop_ticket_ids && this.plus_template_id) {
            this.handleSubmit(datas)
          } else {
            this.$message({
              message: '请选择商家券库跟模板券库',
              type: 'warning'
            })
            return false
          }
        } else {
          this.$message({
            message: '有必填项没填，不能提交咯',
            type: 'warning'
          })
          return false
        }
      })
    },
    // 模板下拉选是否有值
    // handleChange(e) {
    //     this.plus_template_id = e;
    //     if (this.form.name && this.form.cardTemplate) {
    //         this.handleTables();
    //     }
    // },
    // 添加table表
    // handleTables() {
    //     const datas = {
    //         plus_template_id: this.plus_template_id,
    //         shop_ticket_ids: JSON.stringify(this.shop_ticket_ids)
    //     };
    //     showTables(datas)
    //         .then(res => {
    //             if (res.data.code == 200) {
    //                 const resData = res.data.data;
    //                 this.shopData = resData.shop_tickets_list;
    //                 this.goodsData = resData.goods_tickets_list;
    //                 this.beautyData = resData.beauty_tickets_list;
    //             } else {
    //                 this.$message({
    //                     showClose: true,
    //                     message: res.data.msg,
    //                     type: "warning"
    //                 });
    //             }
    //         })
    //         .catch(err => {
    //             this.errorStatus(err.msg);
    //         });
    // },
    clear() {
      this.dialogFormVisible = false
      this.form1 = {
        keyword: '',
        page: 1,
        size: 10
      }
    },
    // 每页显示条数
    handleSizeChange(val) {
      this.form1.size = val
      this.handleTickets(this.form1)
    },
    // 当前页
    handleCurrentChange(val) {
      this.form1.page = val
      this.handleTickets(this.form1)
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      })
    },
    // 成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, 'success')
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, 'error')
    }
  }
}
</script>
<style scoped>
.app-container {
    padding: 0px !important;
}
.pad_30 {
    padding: 0 30px 20px 30px;
}
/* 表单样式修改 */
.width_30 {
    width: 236px;
    height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    color: #606266;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 0 15px;
    box-sizing: border-box;
}
.font_16 {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    margin: 0;
    margin-bottom: 10px;
}
.mt_20 {
    margin-top: 20px;
}
.el-textarea__inne {
    width: 300px;
    min-height: 50px;
    box-sizing: border-box;
}
/* 提示语样式 */
.spanINfo {
    width: 500px;
    display: block;
    color: #444;
}
.col_666 {
    display: inline-block;
    width: 7px;
    height: 20px;
    background: #409eff;
    margin-right: 3px;
    border-radius: 4px;
}
.df {
    display: flex;
}
.min_width {
    min-width: 100px;
}
.text {
    color: #555;
    font-size: 12px;
    height: 24px;
    font-weight: 400;
    display: inline-block;
    line-height: 24px;
}
.solid {
    width: 100%;
    border: 1px solid #333;
}
.dis_cen {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #666;
}
.mr_solid {
    border-right: 1px solid #f4f4f4;
}
.el-table--medium th {
    border: none !important;
}
.el-table--medium th {
    padding: 0px !important;
}
.mb_20 {
    text-align: right;
    margin: 0 10px 20px 0px;
}
.el-table__row td .cell {
    margin: 0 0;
    padding: 0 0;
}
.el-table--enable-row-transition .el-table__body td {
    vertical-align: top;
}
.clea_scoll ::-webkit-scrollbar {
    width: 200px;
    border: none;
}
</style>
